<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #f7f7f7;
            line-height: 1;
        }
        /*修改添加图标的颜色*/

        .search_icon {
            font-size: 1rem!important;
            color: #000!important;
            font-weight: bold;
        }
        /*修改头部标题*/

        .header_title {
            font-size: 0.9rem;
            font-weight: bold;
        }
        /*固定头部*/

        .header {
            position: fixed!important;
            background-color: #fff;
            border: none!important;
        }
        /*列表样式*/

        .list_box {
            background-color: #fff;
            margin: 0.45rem 0;
            line-height: 1.5;
        }

        .list_box .list_all_info_box {
            padding: 0 0.95rem;
        }

        .list_box .list_all_info_box .user_info_box {
            display: flex;
            align-items: center;
            padding: 0.95rem 0;
        }

        .list_box .list_all_info_box .user_info_box .user_img {
            margin-right: 0.95rem;
        }

        .list_box .list_all_info_box .user_info_box .name_time_box .user_name {
            font-size: 0.8rem;
            font-weight: 600;
            color: #333;
        }

        .list_box .list_all_info_box .user_info_box .name_time_box .time {
            font-size: 0.6rem;
            color: #999;
        }

        .list_box .list_all_info_box .txt_box {
            font-size: 0.8rem;
            color: #333;
            text-align: justify;
        }

        .list_box .list_all_info_box .a_box div {
            display: flex;
            align-items: center;
            margin: 0.95rem 0;
            padding: 0.45rem;
            background-color: #f7f7f7;
        }

        .list_box .list_all_info_box .a_box div .a_img {
            width: 2.45rem;
            margin: 0;
            margin-right: 0.45rem;
        }

        .list_box .list_all_info_box .a_box div .a_title {
            font-size: 0.7rem;
            color: #333;
        }

        .list_box .list_all_info_box .address_box {
            display: flex;
            align-items: center;
        }

        .list_box .list_all_info_box .address_box .address_img {
            width: 0.625rem;
            margin-right: 0.45rem;
        }

        .list_box .list_all_info_box .address_box .address_info {
            font-size: 0.6rem;
            color: #666;
        }

        .list_box .three_btn_box {
            display: flex;
            justify-content: space-around;
            padding: 1.5rem 0 0.6rem 0;
        }

        .list_box .three_btn_box .btn {
            display: flex;
            align-items: center;
        }

        .list_box .three_btn_box .btn img {
            width: 0.8rem;
            margin-right: 0.3rem;
        }

        .list_box .three_btn_box .btn span {
            font-size: 0.7rem;
            color: #999;
        }
        /*可拖动的发布按钮*/

        .release_box {
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            background-color: #ff8000;
            position: fixed;
            bottom: 2rem;
            left: calc(100vw - 3.75rem);
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .release_box img {
            width: 1.4rem;
        }
        /*选择朋友圈发布类型*/

        .release_type_box {
            position: fixed;
            width: 100vw;
            height: 100vh;
            top: 0;
            background-color: rgba(255, 255, 255, .9);
            z-index: 30;
            display: none;
        }

        .release_type_btns {
            position: fixed;
            width: 100vw;
            display: flex;
            align-items: center;
            justify-content: space-around;
            text-align: center;
            bottom: 9.75rem;
            z-index: 40;
        }

        .graphic_sharing img,
        .commodity_sharing img {
            width: 3rem;
            margin-bottom: 0.5rem;
        }

        .graphic_sharing span,
        .commodity_sharing span {
            font-size: 0.7rem;
            color: #333;
        }

        .close_btn img {
            position: fixed;
            width: 3rem;
            right: 0.75rem;
            bottom: 4.125rem;
            z-index: 40;
        }

        .padding-B {
            padding-bottom: 0.95rem;
        }

        .overflow_class {
            overflow: hidden;
        }
    </style>
</head>

<body>
    <header class="aui-bar aui-bar-nav header" id='header' style="padding-top:25px;">
        <div class="aui-title header_title">朋友圈</div>
        <a class="aui-pull-right aui-btn aui-btn-outlined">
            <span class="aui-iconfont aui-icon-search search_icon" onclick="open_search_frm()"></span>
        </a>
    </header>


    <div class="friend_list" v-cloak>
        <div class="aui-refresh-content">

            <ul class="all_list_box">
                <li class="list_box" v-for="friend_dynamic in friend_list">
                    <div class="list_all_info_box">
                        <div class="user_info_box" @click="open_new_win('five',friend_dynamic.username,'朋友动态',friend_dynamic.head_img,friend_dynamic.user_id)">


                            <!-- 判断用户头像是否存在 不存在则显示默认头像 -->
                            <div class="user_img" :style="'background:url('+friend_dynamic.head_img+') center/cover no-repeat;width:2.45rem;height:2.45rem;'"></div>



                            <!-- 用户名字以及发布时间 -->
                            <div class="name_time_box">
                                <div class="user_name">{{friend_dynamic.username}}</div>
                                <div class="time">{{friend_dynamic.addtime}}</div>
                            </div>
                        </div>


                        <!-- 判断用户发布动态是否有编辑内容 -->
                        <div v-if="friend_dynamic.content!=''" :class="{'padding-B':friend_dynamic.pic==''}" class="txt_box">{{friend_dynamic.content}}</div>



                        <!-- 分享部分的判断 -->
                        <!-- 图文分享 带文本 -->
                        <ul v-if="friend_dynamic.type==1 && friend_dynamic.content!='' && friend_dynamic.pic!=''" class="aui-list aui-media-list" style="background-image: none;padding-bottom: 0.95rem;padding-top: 0.95rem;" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                            <li class="aui-list-item" style="background-image: none;padding-left: 0;">
                                <div class="aui-list-item-inner" style="padding: 0;">
                                    <div class="aui-row aui-row-padded">
                                        <div v-for="img_src in friend_dynamic.pic" class="aui-col-xs-4">
                                            <div class="img" :style="'background:url('+img_src+') center/cover no-repeat;'"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <!-- 图文分享 不带文本 -->
                        <ul v-else-if="friend_dynamic.type==1 && friend_dynamic.content==''" class="aui-list aui-media-list" style="background-image: none;padding-bottom: 0.95rem;" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                            <li class="aui-list-item" style="background-image: none;padding-left: 0;">
                                <div class="aui-list-item-inner" style="padding: 0;">
                                    <div class="aui-row aui-row-padded">
                                        <div v-for="img_src in friend_dynamic.pic" class="aui-col-xs-4">
                                            <div class="img" :style="'background:url('+img_src+') center/cover no-repeat;'"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>

                        <!-- 商品分享 带文本 -->
                        <div class="a_box" v-if="friend_dynamic.type==2 && friend_dynamic.content!=''" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                            <div>
                                <!-- <img :src="friend_dynamic.logo_pic" alt="" class="a_img"> -->
                                <div class="a_img" :style="'background:url('+friend_dynamic.logo_pic+') center/cover no-repeat;height:2.45rem;'"></div>
                                <span class="a_title">{{friend_dynamic.goods_name}}-{{friend_dynamic.goods_title}}</span>
                            </div>
                        </div>
                        <!-- 商品分享  不带文本 -->
                        <div class="a_box" v-else-if="friend_dynamic.type==2 && friend_dynamic.content==''" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                            <div style="margin-top:0;">
                                <!-- <img :src="friend_dynamic.logo_pic" alt="" class="a_img"> -->
                                  <div class="a_img" :style="'background:url('+friend_dynamic.logo_pic+') center/cover no-repeat;height:2.45rem;'"></div>
                                <span class="a_title">{{friend_dynamic.goods_name}}-{{friend_dynamic.goods_title}}</span>
                            </div>
                        </div>
                        <!-- 转发 商品 带文本 -->
                        <div class="a_box" v-else-if="friend_dynamic.type==3 && friend_dynamic.forward.forward_type==2 && friend_dynamic.content!=''" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                            <div>
                                <!-- <img :src="friend_dynamic.forward.forward_logo_pic" alt="" class="a_img"> -->
                                  <div class="a_img" :style="'background:url('+friend_dynamic.forward.forward_logo_pic+') center/cover no-repeat;height:2.45rem;'"></div>
                                <span class="a_title">{{friend_dynamic.forward.forward_goods_name}}-{{friend_dynamic.forward.forward_goods_title}}</span>
                            </div>
                        </div>
                        <!-- 转发 商品 不带文本 -->
                        <div class="a_box" v-else-if="friend_dynamic.type==3 && friend_dynamic.forward.forward_type==2 && friend_dynamic.content==''" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                            <div style="margin-top:0;">
                                <!-- <img :src="friend_dynamic.forward.forward_logo_pic" alt="" class="a_img"> -->
                                <div class="a_img" :style="'background:url('+friend_dynamic.forward.forward_logo_pic+') center/cover no-repeat;height:2.45rem;'"></div>
                                <span class="a_title">{{friend_dynamic.forward.forward_goods_name}}-{{friend_dynamic.forward.forward_goods_title}}</span>
                            </div>
                        </div>
                        <!-- 转发图文 带文本 -->
                        <ul v-if="friend_dynamic.type==3 && friend_dynamic.forward.forward_type==1 && friend_dynamic.content!=''" class="aui-list aui-media-list" style="background-image: none;padding-bottom: 0.95rem;" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                            <li class="aui-list-item" style="background-image: none;padding-left: 0;">
                                <div class="aui-list-item-inner" style="padding: 0;">
                                    <div class="aui-row aui-row-padded">
                                        <div v-for="img_src in friend_dynamic.forward.forward_pic" class="aui-col-xs-4">
                                            <div class="img" :style="'background:url('+img_src+') center/cover no-repeat;'"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <!-- 转发图文 不带文本 -->
                        <ul v-else-if="friend_dynamic.type==3 && friend_dynamic.forward.forward_type==1 && friend_dynamic.content==''" class="aui-list aui-media-list" style="background-image: none;padding-bottom: 0.95rem;padding-top: 0.95rem;" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                            <li class="aui-list-item" style="background-image: none;padding-left: 0;">
                                <div class="aui-list-item-inner" style="padding: 0;">
                                    <div class="aui-row aui-row-padded">
                                        <div v-for="img_src in friend_dynamic.forward.forward_pic" class="aui-col-xs-4">
                                            <div class="img" :style="'background:url('+img_src+') center/cover no-repeat;'"></div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>



                        <!-- 发布动态时的地址 -->
                        <div class="address_box" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                            <img src="../../image/four/address.png" alt="" class="address_img">
                            <span v-if="friend_dynamic.address!=''" class="address_info">{{friend_dynamic.address}}</span>
                            <span v-else class="address_info">地球的某个角落</span>
                        </div>
                    </div>

                    <!-- 分享评论点赞状态 -->
                    <div class="three_btn_box">
                        <div class="btn" v-if="friend_dynamic.goods_id!=0 && friend_dynamic.type==2" @click="testShare(friend_dynamic.goods_id)">
                            <!-- 是否已分享 -->
                            <img v-if="friend_dynamic.is_forward!=0" src="../../image/four/fx_on.png" alt="">
                            <img v-else src="../../image/four/fx_off.png" alt="">

                            <!-- 分享数量 -->
                            <span v-if="friend_dynamic.forward_num!=0">{{friend_dynamic.forward_num}}</span>
                            <span v-else></span>
                        </div>

                        <div class="btn" v-else-if="friend_dynamic.goods_id==0 && friend_dynamic.type==3 && friend_dynamic.forward.forward_type==2" @click="testShare(friend_dynamic.forward.forward_goods_id)">
                            <!-- 是否已分享 -->
                            <img v-if="friend_dynamic.is_forward!=0" src="../../image/four/fx_on.png" alt="">
                            <img v-else src="../../image/four/fx_off.png" alt="">

                            <!-- 分享数量 -->
                            <span v-if="friend_dynamic.forward_num!=0">{{friend_dynamic.forward_num}}</span>
                            <span v-else></span>
                        </div>

                        <!-- <div class="btn" v-else @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                            是否已分享
                            <img v-if="friend_dynamic.is_forward!=0" src="../../image/four/fx_on.png" alt="">
                            <img v-else src="../../image/four/fx_off.png" alt="">

                            分享数量
                            <span v-if="friend_dynamic.forward_num!=0">{{friend_dynamic.forward_num}}</span>
                            <span v-else></span>
                        </div> -->



                        <div class="btn" @click="open_new_win('one','详情','动态详情','',friend_dynamic.dynamic_id)">
                            <!-- 是否已评论 -->
                            <img v-if="friend_dynamic.is_item!=0" src="../../image/four/pl_on.png" alt="">
                            <img v-else src="../../image/four/pl_off.png" alt="">

                            <!-- 评论的数量 -->
                            <span v-if="friend_dynamic.item_num!=0">{{friend_dynamic.item_num}}</span>
                            <span v-else></span>
                        </div>





                        <div class="btn" v-if="friend_dynamic.is_like==0" @click="to_dz(1,friend_dynamic.dynamic_id)">
                            <!-- 是否点赞 -->
                            <img v-if="friend_dynamic.is_like!=0" src="../../image/four/dz_on.png" alt="">
                            <img v-else src="../../image/four/dz_off.png" alt="">

                            <!-- 点赞数量 -->
                            <span v-if="friend_dynamic.likecount!=0">{{friend_dynamic.likecount}}</span>
                            <span v-else></span>
                        </div>


                        <div class="btn" v-else @click="to_dz(2,friend_dynamic.dynamic_id)">
                            <!-- 是否点赞 -->
                            <img v-if="friend_dynamic.is_like!=0" src="../../image/four/dz_on.png" alt="">
                            <img v-else src="../../image/four/dz_off.png" alt="">

                            <!-- 点赞数量 -->
                            <span v-if="friend_dynamic.likecount!=0">{{friend_dynamic.likecount}}</span>
                            <span v-else></span>
                        </div>
                    </div>
                </li>
            </ul>

        </div>
    </div>

    <!-- 可以拖动的发布按钮 -->
    <div class="release_box" onclick="open_release()">
        <img src="../../image/four/fbpyq.png" alt="">
    </div>



    <!-- 点击发布按钮后的选择 -->
    <div class="release_type_box">
        <div class="release_type_btns">
            <div class="graphic_sharing" onclick="open_new_win('four','发布','图文分享','')">
                <img src="../../image/four/shop_fx.png" alt="">
                <span>图文分享</span>
            </div>

            <div class="commodity_sharing" onclick="open_new_win('four','发布','商品分享','')">
                <img src="../../image/four/tuwen_fx.png" alt="">
                <span>商品分享</span>
            </div>
        </div>


        <div class="close_btn" onclick="close_release()">
            <img src="../../image/four/close_btn.png" alt="">
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh2.js"></script>
<script type="text/javascript">
    apiready = function() {
        //获取header的高度
        var oHeader = $api.byId("header");
        var headerH = $api.offset(oHeader).h;
        $('.friend_list').css('padding-top', headerH);

        // 设置状态栏文字颜色
        api.setStatusBarStyle({
            style: 'dark'
        });

        api.showProgress({
            title: '努力加载中...',
            text: '先喝杯茶...',
            modal: false
        });

        //实例化vue 数据渲染
        var friend_list_vue = new Vue({
            el: '.friend_list',
            data: {
                friend_list: [],
                page: 1
            },
            mounted: function() {
                var $_this = this;
                // 页面加载完毕请求数据接口
                api.ajax({
                    url: window.Url.Community_communityList,
                    method: 'post',
                    data: {
                        values: {
                            token: $api.getStorage('token'),
                            page: 1
                        }
                    }
                }, function(ret, err) {
                    if (ret) {
                        // console.log("获取到的朋友圈列表数据---" + JSON.stringify(ret));
                        if (ret.re == 1) {
                            $_this.friend_list = ret.data.list;
                            api.hideProgress();
                            $_this.$nextTick(function() {
                                $('.img').height($('.img').width())
                            })
                        }
                    } else {
                        alert(JSON.stringify(err));
                    }
                });
                $_this.scroll_load();
                $_this.to_pullRefresh();
            },

            methods: {
              to_dz: function(type,id) {
                // alert(id)
                  var $_this = this;
                  api.ajax({
                      url: window.Url.Community_addLike,
                      method: 'post',
                      data: {
                          values: {
                              token: $api.getStorage('user_data').token,
                              dynamic_id: id,
                              like_type: type,
                              type: 1
                          }
                      }
                  }, function(ret, err) {
                      if (ret) {
                          // alert( JSON.stringify( ret ) );
                          if (ret.re == 1) {

                              api.toast({
                                  msg: ret.info
                              });

                              if (ret.info == "点赞成功") {
                                  $_this.is_like = 1;
                                  $_this.page = 1;
                                  $_this.friend_list_function();
                              } else {
                                  $_this.is_like = 0;
                                  $_this.page = 1;
                                  $_this.friend_list_function();
                              }
                          }
                      } else {
                          alert(JSON.stringify(err));
                      }
                  });

              },
                // 点击转发按钮
                testShare:function(goodsId){
                  api.openFrame({
                      name: 'share',
                      url: '../one_frame/share2.html',
                      pageParam: {
                          goodsid:goodsId
                      }
                  });

                },
                to_pullRefresh: function() {
                    var $_this = this;
                    var pullRefresh = new auiPullToRefresh({
                        container: document.querySelector('.aui-refresh-content'), //下拉容器
                        triggerDistance: 50 //下拉高度
                    }, function(ret) {
                        if (ret.status == "success") {
                            $_this.page = 1;
                            setTimeout(function() {
                                $_this.friend_list_function();
                                pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
                            }, 500)

                        }
                    })
                },
                // 重新获取朋友圈列表数据
                friend_list_function: function() {
                    var $_this = this;
                    // 页面加载完毕请求数据接口
                    api.ajax({
                        url: window.Url.Community_communityList,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                                page: 1
                            }
                        }
                    }, function(ret, err) {
                        if (ret) {
                            // console.log("获取到的朋友圈列表数据---" + JSON.stringify(ret));
                            if (ret.re == 1) {
                                $_this.friend_list = ret.data.list;
                                $_this.$nextTick(function() {
                                    $('.img').height($('.img').width())
                                })
                            }
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });
                },
                scroll_load: function() {
                    var $_this = this;
                    var scroll = new auiScroll({
                        listen: true, //是否监听滚动高度，开启后将实时返回滚动高度
                        distance: 40 //判断到达底部的距离，isToBottom为true
                    }, function(ret) {
                        if (ret.isToBottom) {
                            $_this.page++
                                // 页面加载完毕请求数据接口
                                api.ajax({
                                    url: window.Url.Community_communityList,
                                    method: 'post',
                                    data: {
                                        values: {
                                            token: $api.getStorage('token'),
                                            page: $_this.page
                                        }
                                    }
                                }, function(ret, err) {
                                    if (ret) {
                                        // console.log("获取到的朋友圈列表数据---" + JSON.stringify(ret));
                                        if (ret.re == 1) {
                                            // $_this.friend_list = ret.data.list;
                                            $_this.friend_list = $_this.friend_list.concat(ret.data.list)

                                            api.hideProgress();
                                            $_this.$nextTick(function() {
                                                $('.img').height($('.img').width())
                                            })
                                        }
                                    } else {
                                        alert(JSON.stringify(err));
                                    }
                                });
                        }

                    });
                }
            }

        });

        // vue结束



    };


    // 点击可拖拽发布按钮
    function open_release() {
        $('.release_box').hide();
        $('.release_type_box').show();

        //执行底部页面的添加遮罩方法
        api.execScript({
            script: 'add_cover("rgba(255,255,255,.9)");'
        });

    }

    //点击关闭发布按钮
    function close_release() {
        $('.release_type_box').hide();
        $('.release_box').show();


        //执行底部页面的删除遮罩方法
        api.execScript({
            script: 'remove_cover();'
        });
    }


    // 触摸遮罩关闭
    $('.release_type_box').on('touchstart',function(e){
      if(e.target.tagName=="DIV"){
        close_release();
      }
    })




    // 打开新的窗口
    function open_new_win(index, title, type, img_src, dynamic_id) {
        api.openWin({
            name: 'four_' + index + '_header',
            url: 'four_headers/four_' + index + '_header.html',
            pageParam: {
                title: title,
                type: type,
                dynamic_id: dynamic_id,
                img_src: img_src,
                friend_id: dynamic_id
            }
        });

        if (type == "图文分享" || type == "商品分享") {
            close_release();
        }
    }



    // 点击搜索按钮加载搜索frm
    function open_search_frm() {
        api.openFrame({
            name: 'search_two_header',
            url: 'four_headers/search_two_header.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            pageParam: {
                name: 'test'
            },
            bounces: false,
            bgColor: 'rgba(0,0,0,0)',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });

    }



    // 点击拖拽的按钮
    // $('.release_box').on('touchstart', function(e) {
    //     $('.release_box').css('transition', 'none');
    //     // 记录点击的点
    //     var touches = e.originalEvent.targetTouches[0];
    //     var touch_start_x = touches.clientX;
    //     var touch_start_y = touches.clientY;
    //
    //     // 记录球的位置
    //     var oBox_x = $(this).offset().left;
    //     var oBox_y = $(this).offset().top;
    //
    //     // 相减后的坐标
    //     var move_x = touch_start_x - oBox_x;
    //     var move_y = touch_start_y - oBox_y;
    //
    //     // 移动
    //     var end_x = touch_start_x;
    //     var end_y = touch_start_y;
    //
    //     // 屏幕宽度
    //     var win_width = api.winWidth;
    //     var win_height = api.winHeight;
    //     // 小球宽高
    //     var oBox_h = $(this).height();
    //     var oBox_w = $(this).width();
    //
    //     $('.release_box').on('touchmove', function(e) {
    //       //阻止页面的滑动默认事件
    //          document.addEventListener("touchmove",function(e){
    //              e.preventDefault();
    //          },false);
    //       // $('html,body').css('overflow','hidden');
    //         //记录点击时的坐标点
    //         var touches = e.originalEvent.targetTouches[0];
    //         var touch_move_x = touches.clientX;
    //         var touch_move_y = touches.clientY;
    //
    //         // 最终位置的点
    //         end_x = touch_move_x - move_x;
    //         end_y = touch_move_y - move_y;
    //         //获取header的高度
    //         var oHeader = $api.byId("header");
    //         var headerH = $api.offset(oHeader).h;
    //
    //         if ((touch_move_x - move_x) >= (win_width - oBox_w)) {
    //             end_x = win_width - oBox_w;
    //         }
    //         if ((touch_move_x - move_x) <= 0) {
    //             end_x = 0;
    //         }
    //         if ((touch_move_y - move_y) >= (win_height - oBox_h - 50)) {
    //             end_y = win_height - oBox_h - 50;
    //         }
    //         if ((touch_move_y - move_y) <= headerH) {
    //             end_y = headerH;
    //         }
    //
    //         $(this).css({
    //             'top': end_y + 'px',
    //             'left': end_x + 'px'
    //         })
    //     })
    //
    //     // 松开
    //     $('.release_box').on('touchend', function(e) {
    //       // $('html,body').css('overflow','auto');
    //
    //         $('.release_box').css('transition', 'all 0.5s');
    //         $('.release_box').off('touchmove');
    //         $('.release_box').off('touchend');
    //
    //
    //         if (end_x > win_width / 2) {
    //             end_x = win_width - oBox_w;
    //         } else {
    //             end_x = 0;
    //         }
    //         $('.release_box').css('left', end_x);
    //     })
    //
    // })

</script>

</html>
